__.debug();
__.BasicModule.prototype.baseURI = '../../..';

__.BasicModule.register('appP', '0.4.0', ['Anim', 'selector'], function () {
  var _app = {
    showHint : function () {
      var hint;

      hint = __.dom.addEl({
        css : 'width:400px;padding:40px 10px;border:1px solid #ccc;text-align:center;border-radius:5px;visibility:hidden',
        child : [{
          _t : 'Sorry, 请用'
        }, {
          tag : 'a',
          href : 'http://www.google.com/chrome',
          target : '_blank',
          text : 'Chrome浏览器'
        }, {
          _t : '打开本页'
        }]
      }, __.doc.body);

      __.dom.setCenter(hint);
      hint.style.top = '-120px';
      hint.style.visibility = '';
      (new __.Anim(hint, 'top', {
        unit : 'px',
        isStyle : true,
        to : 100,
        lasttime : 1500,
        interval : 30
      })).run();
    },

    showText : function (textDiv, x, y, fn) {
      textDiv.style.opacity = '0';
      textDiv.style.position = 'absolute';
      textDiv.style.left = x + 'px';
      textDiv.style.top = y + 'px';
      textDiv.style.fontSize = '24px';

      __.doc.body.appendChild(textDiv);
      (new __.Anim(textDiv, 'opacity', {
        isStyle : true,
        to : 1,
        lasttime : 3000,
        interval : 30,
        onOver : function () {
          fn && fn.apply(_app);
        }
      })).run();
    },

    showT1 : function () {
      this.showText(__.dom.addEl({
        child : [{
          tag : 'span', text : '爱'
        }, {
          tag : 'span', cls : 'size-3', text : 'C'
        }, {
          tag : 'span', cls : 'size-4', text : '奶'
        }]
      }), 480, 40, this.showT2);
    },

    showT2 : function () {
      this.showText(__.dom.addEl({
        child : [{
          tag : 'span', text : '不爱'
        }, {
          tag : 'span', cls : 'size-3', text : '平胸'
        }]
      }), 560, 45, this.showT3);
    },

    showT3 : function () {
      this.showText(__.dom.addEl({
        child : [{
          tag : 'span', text : '爱'
        }, {
          tag : 'span', cls : 'size-3', text : '采访'
        }, {
          tag : 'span', cls : 'size-5', text : '记录'
        }]
      }), 480, 90, this.showT4);
    },

    showT4 : function () {
      this.showText(__.dom.addEl({
        child : [{
          tag : 'span', text : '不爱'
        }, {
          tag : 'span', cls : 'size-4', text : '旅途劳顿'
        }]
      }), 635, 95, this.showT5);
    },

    showT5 : function () {
      this.showText(__.dom.addEl({
        child : [{
          tag : 'span', text : '爱'
        }, {
          tag : 'span', cls : 'size-3', text : '美女'
        }]
      }), 480, 140, this.showT55);
    },

    showT55 : function () {
      this.showText(__.dom.addEl({
        child : [{
          tag : 'span', text : '爱'
        }, {
          tag : 'span', cls : 'size-4', text : '舞蹈'
        }]
      }), 580, 130, this.showT56);
    },

    showT56 : function () {
      this.showText(__.dom.addEl({
        child : [{
          tag : 'span', text : '爱'
        }, {
          tag : 'span', cls : 'size-3', text : '剪片'
        }]
      }), 660, 135, this.showT6);
    },

    showT6 : function () {
      this.showText(__.dom.addEl({
        child : [{
          tag : 'span', text : '更爱'
        }, {
          tag : 'span', cls : 'size-4', text : '自拍'
        }]
      }), 750, 140, this.showT7);
    },

    showT7 : function () {
      this.showText(__.dom.addEl({
        child : [{
          tag : 'span', text : '爱'
        }, {
          tag : 'span', cls : 'size-3', text : '追求完美'
        }]
      }), 480, 190, this.showT8);
    },

    showT8 : function () {
      this.showText(__.dom.addEl({
        child : [{
          tag : 'span', text : '也爱'
        }, {
          tag : 'span', cls : 'size-4', text : '享受生活'
        }]
      }), 640, 190, this.showT9);
    },

    showT9 : function () {
      this.showText(__.dom.addEl({
        child : [{
          tag : 'span', cls : 'size-2', text : '最'
        }, {
          tag : 'span', text : '爱'
        }, {
          tag : 'span', cls : 'size-3', text : '红歌山城'
        }]
      }), 470, 240, this.showT10);
    },

    showT10 : function () {
      this.showText(__.dom.addEl({
        child : [{
          tag : 'span', text : '也爱'
        }, {
          tag : 'span', cls : 'size-4', text : '求真相'
        }]
      }), 657, 250, this.showT11);
    },

    showT11 : function () {
      this.showText(__.dom.addEl({
        child : [{
          tag : 'span', text : '不是'
        }, {
          tag : 'span', cls : 'size-4', text : '明星'
        }]
      }), 490, 295, this.showT12);
    },

    showT12 : function () {
      this.showText(__.dom.addEl({
        child : [{
          tag : 'span', text : '不是'
        }, {
          tag : 'span', cls : 'size-4', text : '导演'
        }]
      }), 600, 295, this.showT13);
    },

    showT13 : function () {
      this.showText(__.dom.addEl({
        child : [{
          tag : 'span', text : '不是'
        }, {
          tag : 'span', cls : 'size-4', text : '运动员'
        }]
      }), 710, 295, this.showT14);
    },

    showT14 : function () {
      this.showText(__.dom.addEl({
        css : 'color:rgb(150, 21, 26);font-weight:bold;',
        child : [{
          tag : 'span', css :'position:relative;top:-3px;', cls : 'size-2', text : '我是'
        }, {
          tag : 'span', cls : 'size-1', text : '小滴'
        }]
      }), 480, 340, this.showT15);
    },

    showT15 : function () {
      this.showText(__.dom.addEl({
        child : [{
          tag : 'span', css : 'position:relative;top:-3px;', text : '我没'
        }, {
          tag : 'span', cls : 'size-3', text : '什么'
        }, {
          tag : 'span', cls : 'size-3', text : '特别'
        }]
      }), 630, 340, this.showT16);
    },

    showT16 : function () {
      this.showText(__.dom.addEl({
        child : [{
          tag : 'span', css : 'position:relative;top:-4px;', cls : 'size-3', text : '我很'
        }, {
          tag : 'span', css : 'position:relative;top:3px;', cls : 'size-2', text : '特'
        }, {
          tag : 'span', css : 'position:relative;top:-3px;', cls : 'size-2', text : '别'
        }]
      }), 820, 340, this.ending);
    },

    ending : function () {
      this.particle.isPlaying = false;
      this.particle.isMouseDown = false;

      this.showText(__.dom.addEl({
        child : [{
          ag : 'span', css : '', text : 'The End (可以点击鼠标玩这些小颗粒^_^)'
        }]
      }), 480, 400, this.ending);
    },

    showHead : function () {
      var hint;

      hint = __.dom.addEl({
        css : 'height:480px;padding:10px;border:1px solid #ccc;text-align:center;border-radius:5px;position:absolute;left:10px;top:20px;opacity:0;',
        child : {
          tag : 'img',
          css : 'width:360px;height:480px;',
          src : 'http://stauren.net/xd/p1.jpg'
        }
      }, __.doc.body);

      this.particle.isPlaying = true;

      (new __.Anim(hint, 'opacity', {
        isStyle : true,
        to : 1,
        lasttime : 5000,
        interval : 30,
        onOver : function () {
          _app.showT1();
        }
      })).run();
    },

    startCounting : function () {
      var hint, ivId, span, count, loadingResult, img, dMusic;

      hint = __.dom.addEl({
        css : 'width:550px;padding:20px 20px;border:1px solid #ccc;text-align:center;border-radius:5px;',
        child : [{
          child : [{
            css : 'text-shadow: #6374AB 20px -16px 4px;font-size:20px;padding:0 0 10px 0;font-weight:bold;text-align:left;padding-left:180px;', child : [{
              _t : 'Loading'
            }, {
              tag : 'span', text : '.'
            }]
          }, {
            text : 'Please set your browser to fullscreen.'
          }, {
            text : 'Soon be started, please wait.'
          }]
        }, {
          css : 'display:none;',
          child : [{
            _t : 'All Ready, Let\'s go!'
          }]
        }]
      }, __.doc.body);

      __.dom.setCenter(hint);
      hint.style.top = '180px';
      span = __.dom.f('span', hint);

      loadingResult = 0;
      img = new Image();
      img.onload = function () {
        loadingResult = 1;
      };
      img.src = 'http://stauren.net/xd/p.jpg';

      count = 1;
      dMusic = __.dom.f('music');
      ivId = setInterval(function () {
        var buf = 0;
        span.innerHTML = __.lang.strRepeat('.', count++ % 16);
        try {
          buf = music.buffered.end();
        } catch (e) {}
        if (count >= 10 && loadingResult === 1 && buf > 100
            ) {
          clearInterval(ivId);
          hint.childNodes[0].style.display = 'none';
          hint.childNodes[1].style.display = 'block';
          setTimeout(function () {
            (new __.Anim(hint, 'top', {
              unit : 'px',
              isStyle : true,
              to : -120,
              lasttime : 800,
              interval : 30,
              onOver : function() {
                _app.showHead();
                _app.music.play();
              }
            })).run();
          }, 1000);
        }
      }, 800);
    },

    particle : {
      canvasW : 1000,
      canvasH : 560,
      numMovers : 550,
      friction : .96,
      radCirc : Math.PI * 2,
      canvas : null,
      ctx : null,
      canvasDiav : null,
      movers : [],
      mouseX : null,
      mouseY : null,
      mouseVX :null,
      mouseVY : null,
      prevMouseX : 0,
      prevMouseY : 0,
      isMouseDown : false,
      isPlaying : false,

      Mover : function () {
        this.color = "rgb(" + Math.floor( Math.random()*255 ) + "," + Math.floor( Math.random()*255 ) + "," + Math.floor( Math.random()*255 ) + ")";
        this.y     = 0;
        this.x     = 0;
        this.vX    = 0;
        this.vY    = 0;
      },

      setup : function () {
        this.outerDiv = __.dom.f("outer");
        this.canvasDiv = __.dom.f("canvasContainer");
        this.ctx = this.canvas.getContext("2d");

        var i = this.numMovers;
        while (i--) {
          var m = new _app.particle.Mover();
          m.x  = this.canvasW * .5;
          m.y  = this.canvasH * .5;
          m.vX = Math.cos(i) * Math.random() * 25;
          m.vY = Math.sin(i) * Math.random() * 25;
          this.movers[i] = m;
        }

        __.doc.onmousedown = this.onDocMouseDown;
        __.doc.onmouseup   = this.onDocMouseUp;
        __.doc.onmousemove = this.onDocMouseMove;
      },

      onDocMouseDown : function (e) {
        _app.particle.isMouseDown = true;
        return false;
      },

      onDocMouseUp : function ( e ) {
        _app.particle.isMouseDown = false;
        return false;
      },

      onDocMouseMove : function (e) {
        var ev = e ? e : window.event,
          obj = _app.particle;

        obj.mouseX = ev.clientX - obj.outerDiv.offsetLeft -
          obj.canvasDiv.offsetLeft;
        obj.mouseY = ev.clientY - obj.outerDiv.offsetTop  -
          obj.canvasDiv.offsetTop;
      },

      run : function () {
        var mx, my;

        this.ctx.globalCompositeOperation = "source-over";
        this.ctx.fillStyle = "rgba(8,8,12,.65)";
        this.ctx.fillRect( 0 , 0 , this.canvasW , this.canvasH );
        this.ctx.globalCompositeOperation = "lighter";

        if (this.isPlaying) {
          mx = this.canvasW / 2;
          my = this.canvasH / 2;
          this.isMouseDown = true;
        } else {
          mx = this.mouseX;
          my = this.mouseY;
        }

        this.mouseVX    = mx - this.prevMouseX;
        this.mouseVY    = my - this.prevMouseY;
        this.prevMouseX = mx;
        this.prevMouseY = my;

        var toDist   = this.canvasW / 1.15;
        var stirDist = this.canvasW / 8;
        var blowDist = this.canvasW / 2;

        var Mrnd   = Math.random;
        var Mabs   = Math.abs;
        var Msqrt  = Math.sqrt;
        var Mcos   = Math.cos;
        var Msin   = Math.sin;
        var Matan2 = Math.atan2;
        var Mmax   = Math.max;
        var Mmin   = Math.min;

        var i = this.numMovers;
        while( i-- ) {
          var m  = this.movers[i],
            x  = m.x,
            y  = m.y,
            vX = m.vX,
            vY = m.vY,
            dX = x - mx,
            dY = y - my,
            d = Msqrt( dX * dX + dY * dY ),
            a = Matan2( dY , dX ),
            cosA = Mcos( a ),
            sinA = Msin( a );

          if (this.isMouseDown) {
            if( d < blowDist ) {
              var blowAcc = ( 1 - ( d / blowDist ) ) * 14;
              vX += cosA * blowAcc + .5 - Mrnd();
              vY += sinA * blowAcc + .5 - Mrnd();
            }
          }

          if( d < toDist ) {
            var toAcc = ( 1 - ( d / toDist ) ) * this.canvasW * .0014;
            vX -= cosA * toAcc;
            vY -= sinA * toAcc;
          }

          if( d < stirDist ) {
            var mAcc = ( 1 - ( d / stirDist ) ) * this.canvasW * .00022;
            vX += this.mouseVX * mAcc;
            vY += this.mouseVY * mAcc;
          }

          vX *= this.friction;
          vY *= this.friction;

          var avgVX = Mabs( vX );
          var avgVY = Mabs( vY );
          var avgV = ( avgVX + avgVY ) * .5;

          if( avgVX < .1 ) vX *= Mrnd() * 3;
          if( avgVY < .1 ) vY *= Mrnd() * 3;

          var sc = avgV * .45;
          sc = Mmax( Mmin( sc , 3.5 ) , .4 );

          var nextX = x + vX;
          var nextY = y + vY;

          if( nextX > this.canvasW ) {
            nextX = this.canvasW;
            vX *= -1;
          } else if( nextX < 0 ) {
            nextX = 0;
            vX *= -1;
          }

          if( nextY > this.canvasH ) {
            nextY = this.canvasH;
            vY *= -1;
          } else if( nextY < 0 ) {
            nextY = 0;
            vY *= -1;
          }

          m.vX = vX;
          m.vY = vY;
          m.x  = nextX;
          m.y  = nextY;

          this.ctx.fillStyle = m.color;
          this.ctx.beginPath();
          this.ctx.arc( nextX , nextY , sc , 0 , this.radCirc , true );
          this.ctx.closePath();
          this.ctx.fill();
        }
      },

      init : function () {
        __.dom.addEl({
          id : 'outer', child : {
            id : 'canvasContainer', child : {
              tag : 'canvas', id : 'mainCanvas', width : 1000, height : 560
            }
          }
        }, __.doc.body);

        this.canvas = __.dom.f("mainCanvas");

        if (this.canvas.getContext) {
          this.setup();
          setInterval(function () {
            _app.particle.run()
          }, 33);
        }
      }
    },

    music : {
      el : null,
      play : function () {
        this.el.play();
      },
      init : function () {
        this.el = __.dom.addEl({
          id : 'music',
          css : 'position:absolute;top:531px;left:703px;z-index:3;',
          tag : 'audio',
          controls : 'controls',
          preload : 'preload',
          child : {
            tag : 'source',
            src : 'http://stauren.net/uploads/iwillfollowyou.mp3',
            type : 'audio/mpeg'
          }
        }, __.doc.body);
      }
    },

    init : function () {
      if (!__.ua.chrome) {
        this.showHint();
      } else {
        this.particle.init();
        this.startCounting();
        this.music.init();
      }
    }
  };

  _app.init();
})
